<template>
	<div class="wy-main business-car-manage">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >管理我的车辆</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<div>
			<a-input style="width: 200px;" v-model="licence" placeholder="请输入车牌号"/>
			<a-button type="primary" style="margin-left: 10px;" @click="getVehicleinfo">点击查询</a-button>
			<a-button style="margin-left: 10px;" @click='reset'>重置信息</a-button>
			<!--<router-link to="/business/car/vehicleadd">
				<a-button type="primary" style="float: right;">新增车辆</a-button>
			</router-link>-->
			<router-link to="/business/car/vehicleadd">
				<a-button type="primary" class="wy-m-l-10 wy-float-r"  v-hasPermission="'vehicle:add'">新增车辆</a-button>
			</router-link>
			<a-button type="primary" class="wy-m-l-10 wy-float-r"  v-hasPermission="'vehicle:add2'" @click="$refs.autoError.handleShow()">新增车辆</a-button>
		</div>
		<div class="route_choice">
			<a-table style="text-align: center" :columns="columns" :dataSource="cardata" :rowKey="record => record.vehicleId" :pagination="pagination" @change="handleTableChange" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" class="table-thead">
				<!-- <span slot="cltype" slot-scope="text, record">
					<span v-if="record.type==1">厢式货车</span>
					<span v-if="record.type==2">平板车</span>
					<span v-if="record.type==3">高栏车</span>
					<span v-if="record.type==4">低栏车</span>
					<span v-if="record.type==5">面包车</span>
					<span v-if="record.type==6">冷藏车</span>
					<span v-if="record.type==7">保温车</span>
					<span v-if="record.type==8">罐式车</span>
			  	</span> -->
			  <span slot="authenticationStatusValue" slot-scope="text, record" >
					<span v-if="text == '认证中'" style="color: #F5B12E;">{{text}}</span>
				  	<span  v-if="text == '认证失败'" style="color: red;">{{text}}</span>
				  	<span v-if="text == '认证成功'" style="color: #15837A;;">{{text}}</span>
			  </span>	
				<!-- <span slot="authenticationStatus" slot-scope="text, record">
					<span v-if="record.authenticationStatus==1">认证中</span>
					<span v-if="record.authenticationStatus==2">认证成功</span>
					<span v-if="record.authenticationStatus==3">认证失败</span>
				</span> -->
				<span slot="action" slot-scope="text, record">
			      <a href="javascript:;" @click="seeInfo(record)">查看</a>
			      <a-divider type="vertical" v-if="record.authenticationStatusValue == '认证失败'" />
			      <a href="javascript:;" v-if="record.authenticationStatusValue == '认证失败'" @click="edit(record)"> 修改</a>
			      <a-divider type="vertical" />
			      <a href="javascript:;" @click="delVehicle(record)"> 删除</a>
			    </span>
				<span slot="releaseDateSplit" slot-scope="text, record">
                <span v-if="!!record.createTime">{{record.createTime.split(" ")[0]}}</span>
              </span>
			</a-table>
		</div>
		<div style='margin-top: -50px;'>
			<a-button @click="delVehicles">删除所选</a-button>
		</div>
		<a-modal :title="type == 'edit' ? '编辑车辆信息' : '查看车辆信息'" :visible="visible" @cancel="handleCancel" width="900px" :maskClosable='false' :footer="null" >
			<vehicle-add v-if="visible" @close="close" :isSee="isSee" :datail='datail'  :type='type'></vehicle-add>
		</a-modal>
		<!--未认证弹窗-->
		<auto-error  ref="autoError" ></auto-error>
	</div>
</template>
<script>
	import vehicleAdd from './VehicleAdd'
	import AutoError from '@/components/dialog/AutoError'
	const columns = [{
		title: '车牌号',
		dataIndex: 'licence',
		width: "100px",
		key: '2',
	}, {
		title: '车辆类型',
		dataIndex: 'typeValue',
		width: "100px",
		// scopedSlots: {
		// 	customRender: 'cltype'
		// },
		key: '3',
	}, {
		title: '车长',
		dataIndex: 'length',
		width: "100px",
		key: '4',
	}, {
		title: '载重',
		dataIndex: 'weight',
		width: "100px",
		key: '5',
	}, {
		title: '车辆常驻地',
		dataIndex: 'residence',
		width: "120px",
		key: '7',
	}, {
		title: '认证状态',
		dataIndex: 'authenticationStatusValue',
		width: "100px",
		scopedSlots: {
			customRender: 'authenticationStatusValue'
		},
		key: '8',
	}, {
		title: '登记日期',
		dataIndex: 'createTime',
		scopedSlots: {
			customRender: 'releaseDateSplit'
		},
		width: "100px",
		key: '9',
	}, {
		title: '操作',
		key: '0',
		width: "120px",
		scopedSlots: {
			customRender: 'action'
		},
	}];

	export default {
		data() {
			return {
				licence:'',
				type:'',
				isSee:true,
				datail:{},
				visible:false,
				cardata:[],
				columns,
				loading: false,
				pagination: {
				  pageSizeOptions: ['10', '20', '30', '40', '100'],
				  defaultCurrent: 1,
				  defaultPageSize: 10,
				  showSizeChanger: true,
				  total:0,
				  showTotal: (total, range) => `共 ${total} 条记录`
				},
				form: this.$form.createForm(this),
			    selectedRowKeys: [],
			}
		},
		computed: {
		},
		beforeCreate() {},
		created() {
			this.getVehicleinfo()
			// 车辆类型
			this.getCommonDict('carTypeList',5);
		},
		components: {
			vehicleAdd,
			AutoError
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			// 字典表接口 
			getCommonDict (nameList,type) {
				this.loading = true
				this.$get('/info/commonDict', {
					dictType: type,
		            pageSize: 99,
		            pageIndex: 1
				}).then((r) => {
					this.loading = false
		            switch(type){
		              case 5: 
		                this[nameList] = r.data.rows; 
		                break;
		            }
				}).catch((e) => {
					this.loading = false;
				})
			},
			// 重置信息查询
			reset(){
				this.licence = ''
				this.getVehicleinfo()
			},
			// 修改完成后关闭查询
			close(){
				this.visible = false
				this.getVehicleinfo()
			},
			// 关闭弹窗
			handleCancel(){
				this.visible = false
			},
			// 查看货物信息
			seeInfo(data){
				this.type = 'info'
		        this.visible = true
				this.datail = data
				this.isSee = true
			},
			// 编辑货物信息
			edit(data){
				this.type = 'edit'
				this.visible = true
				this.datail = data
				this.isSee = false
			},
			// 删除多条信息
			delVehicles(){
				 if (!this.selectedRowKeys.length) {
				  this.$message.warning('请选择需要删除的记录')
				  return
				}
				// let ids = []
				// for (let key of this.selectedRowKeys) {
				// 	ids.push(this.cardata[key].vehicleId)
				// }
				// this.delVehicle(ids)
				let that = this
				this.$confirm({
				  title: '确定删除所选中的记录?',
				  content: '当您点击确定按钮后，这些记录将会被彻底删除',
				  centered: true,
				  onOk () {
				    let logIds = []
				    for (let key of that.selectedRowKeys) {
				      logIds.push(key)
				    }
					that.$delete('/info/infoVehicle/' + logIds.join(',')).then(() => {
					  that.$message.success('删除成功')
					  that.selectedRowKeys = []
					  that.getVehicleinfo()
					})
				  },
				  onCancel () {
				    that.selectedRowKeys = []
				  }
				})
			},
			// 删除单条信息
			delVehicle(data){
				console.log(data,'我是data')
				let that = this
				this.$confirm({
				  title: '确定删除所选中的记录?',
				  content: '当您点击确定按钮后，这些记录将会被彻底删除',
				  centered: true,
				  onOk () {
				    let logIds = []
				    logIds.push(data.vehicleId)
				    that.$delete('/info/infoVehicle/' + logIds.join(',')).then(() => {
				      that.$message.success('删除成功')
				      that.selectedRowKeys = []
				      that.getVehicleinfo()
				    })
				  },
				  onCancel () {
				    that.selectedRowKeys = []
				  }
				})
			},
			// 获取车辆信息列表
			getVehicleinfo(params={}){
				this.loading = true
				params.pageSize = this.pagination.defaultPageSize
				params.pageNum = this.pagination.defaultCurrent
				params.licence = this.licence
				this.$get('/info/infoVehicle', params).then((r) => {
					console.log(r)
					this.loading = false
					this.pagination.total = r.data.data.total
					this.cardata = r.data.data.rows
				})
			},
			// 全选选择
			onSelectChange (selectedRowKeys) {
		      console.log('selectedRowKeys changed: ', selectedRowKeys);
		      this.selectedRowKeys = selectedRowKeys
		    },
			// 表格排序 分页 筛选事件
			handleTableChange (pagination, filters, sorter) {
			   this.pagination.defaultPageSize = pagination.pageSize
			   this.pagination.defaultCurrent  = pagination.current
			   this.getVehicleinfo()
			},
		}
	}
</script>

<style lang="less" scoped>
  .table-thead  th div{
		text-align: center
	
		}
		
		
		
		

 
	.business-car-manage {
		.route_choice {
			margin-top: 20px;
		}
	}
</style>